import React, { Component } from "react";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";
import data from '../../../data/olympicWinners.json';

class GridExample extends Component {
  constructor(props) {
    super(props);

    this.state = {
      columnDefs: [
        {
          headerName: "Athlete",
          field: "athlete",
          minWidth: 150
        },
        {
          headerName: "Age",
          field: "age",
          minWidth: 90
        },
        {
          headerName: "Country",
          field: "country"
        },
        {
          headerName: "Year",
          field: "year"
        },
        {
          headerName: "Date",
          field: "date"
        },
        {
          headerName: "Sport",
          field: "sport"
        },
        {
          headerName: "Gold",
          field: "gold"
        },
        {
          headerName: "Silver",
          field: "silver"
        },
        {
          headerName: "Bronze",
          field: "bronze"
        },
        {
          headerName: "Total",
          field: "total"
        }
      ],
      rowData: null
    };
  }

  onGridReady = params => {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    this.setState({ rowData: data });
  };

  render() {
    return (
      <div style={{ width: "100%", height: "100%" }}>
        <div
          id="myGrid"
          style={{
            height: "100%",
            width: "100%"
          }}
          className="ag-theme-balham"
        >
          <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData} onGridReady={this.onGridReady} />
        </div>
      </div>
    );
  }
}

export default GridExample;
